<!--
 * @Author: wwssaabb
 * @Date: 2021-05-26 10:29:41
 * @LastEditTime: 2021-05-26 18:19:31
 * @FilePath: \demo\canvas_demo\demo_items\clock.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas_clock</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    body{
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>

  <canvas id="canvas1" width="500px" height="500px"></canvas>

  <script type="text/javascript">

    let canvas=document.querySelector('#canvas1')
    let ctx=canvas.getContext('2d')
    let img=new Image()
    img.src='../img/test.jpg'

    function renderClock(){
      
      ctx.clearRect(0,0,500,500)
      ctx.save()
      ctx.arc(250,250,210,0,2*Math.PI)
      ctx.clip()
      ctx.drawImage(img,-20,-30,500,500)
      ctx.closePath()
      ctx.save()
      //改变原点坐标到中心
      ctx.translate(250,250)

      //制作表盘
      ctx.beginPath()
      ctx.arc(0,0,200,0,2*Math.PI)
      ctx.strokeStyle='rgba(0,0,0,.8)'
      ctx.lineWidth=8
      ctx.stroke()
      ctx.closePath()

      //制作表盘刻度
      
      for(let i=0;i<12;i++){
        ctx.rotate(Math.PI/6)
        ctx.beginPath()
        ctx.moveTo(0,-196)
        ctx.lineTo(0,-186)
        ctx.stroke()
        ctx.closePath()
      }

      for(let i=0;i<60;i++){
        if((i+1)%5!==0){
          ctx.rotate(Math.PI/30)
          ctx.beginPath()
          ctx.moveTo(0,-193)
          ctx.lineTo(0,-186)
          ctx.lineWidth=2
          ctx.strokeStyle='#db0014'
          ctx.stroke()
        }else{
          ctx.rotate(Math.PI/30)
        }
        ctx.closePath()
      }

      //刻度数字
      /* ctx.restore()
      ctx.translate(250,76)
      ctx.beginPath()
      for(let i=0;i<12;i++){
        ctx.rotate(Math.PI/6)
        ctx.font='bold 16px 楷体'
        ctx.fillText(i+1,i+1>=10?14:8,0)
        if((i+1)>=10){
          ctx.fillText(i+1)
        }else{
          ctx.fillText(i+1)
        }
      } */

      //获取时间对象
      let now=new Date()
      let h=now.getHours()
      let m=now.getMinutes()
      let s=now.getSeconds()
      
      //时针
      ctx.save()
      ctx.beginPath()
      ctx.rotate(Math.PI/6*h+Math.PI/30/60*m+Math.PI/30/3600*s)
      ctx.moveTo(0,-100)
      ctx.lineTo(0,10)
      ctx.strokeStyle='#758a99'
      ctx.lineWidth=9
      ctx.lineCap='round'
      ctx.stroke()
      ctx.restore()

      //分针
      ctx.save()
      ctx.beginPath()
      ctx.rotate(Math.PI/30*m+Math.PI/30/60*s)  
      ctx.moveTo(0,-135)
      ctx.lineTo(0,20)
      ctx.strokeStyle='#065279'
      ctx.lineWidth=6
      ctx.lineCap='round'
      ctx.stroke()
      ctx.closePath()
      ctx.restore()

      //秒针
      ctx.save()
      ctx.beginPath()
      ctx.rotate(Math.PI/30*s)
      ctx.moveTo(0,-170)
      ctx.lineTo(0,30)
      ctx.strokeStyle='#f9e1b2'
      ctx.lineWidth=3
      ctx.lineCap='round'
      ctx.stroke()
      ctx.closePath()
      ctx.restore()

      //轴帽
      ctx.beginPath()
      ctx.arc(0,0,6,0,2*Math.PI)
      ctx.fillStyle='#aaa'
      ctx.fill()
      ctx.strokeStyle='#d8d8d8'
      ctx.stroke()
      ctx.closePath()
      ctx.restore()

      /* setInterval(()=>{
        //s=(s+1)===60?0:s+1
        if(s+1===60){
          s=0
          if(m+1===60){
            m=0
            if(h+1===12||h+1===24){
              h=(h+1)<=12?(h+1):((h+1)===24?0:(h-11))
            }else{
              h+=1
            }
          }else{
            m+=1
          }
        }else{
          s=s+1
        }
        console.log(h+':'+m+':'+s)
      },1000) */
      console.log(h+':'+m+':'+s)
    }

    setInterval(()=>{
      renderClock()
    },1000)


  </script>
</body>
</html>